<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
            "maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>信息追加</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/rams.css"/>

    <style>
        .aui-bar-nav{
            background-color: #e10010;
        }
        .aui-icon-left{
            font-size: 0.7rem;
            font-weight: 700;
        }
        .aui-checkbox1{
            width: 0.8rem;
            height: 0.8rem;
        }

    </style>
</head>
<body style="position: relative">
    <header class="aui-bar aui-bar-nav headerMarginTop"style="position:fixed;">
        <div class="aui-pull-left aui-btn">
            <span class="aui-iconfont aui-icon-left"></span>
            <span class="aui-Font" onclick="api.closeWin()">返回</span>
        </div>
        <div class="aui-title">对象列表</div>
        <div class="aui-pull-right header_confirm">
            <span class="aui_Font" onclick="submitTest()">确定</span>
        </div>
    </header>

    <div class="aui-content aui-margin-b-15" style="margin-top: 3rem">
        <ul class="aui-list aui-list-in" id="dept_container">

        </ul>
    </div>


<script id="check_dept" type="text/template">
    {{ for(var i=0;i<it.length;i++){
    var item = it[i];
    }}
    <li class="aui-list-item">
        <div class="aui-list-item-inner" >
            <div class="aui-list-item-title" id="1"  style="position: relative;width: 100%!important;padding-top: 2%;padding-bottom: 5px">
                <input id="3" type="checkbox" class="aui-checkbox1 aui-margin-l-10 aui-font-size-14" style="width:5%" name="{{=item.id_name}}" value="{{=item.name}}" onclick="check_dept_Inp(this)" data-id="{{=item.id}}"  data-name="{{=item.name}}" data-type="{{=item.type}}"><span style="display: inline-block;margin-left:1rem;width:60%" class="span-text" onclick="check_dept(this)">{{=item.name}}</span>
                <span class="aui-iconfont aui-icon-down span-icon" style="position:absolute;right:2rem"  onclick="dept_goOrStop(this)"></span>
            </div>

        </div>
    </li>
    <div class="aui-content"  style="margin-left:1rem">
        <ul class="aui-list-in" style="border-top:0px solid #dddddd ;" id="{{=item.id}}" >

        </ul>
    </div>
    {{
    }
    }}
</script>
<script id="children_dept" type="text/template">
    {{ for(var i=0;i<it.length;i++){
    var item_child = it[i];
    }}
    <li class="aui-list-item">
        <div class="aui-list-item-inner">
            <div class="aui-list-item-title" style="position: relative;width: 100%!important;height:auto;padding-top:5px;padding-bottom:5px">
                <input type="checkbox" class="aui-checkbox1 aui-margin-l-10 aui-font-size-14" name="{{=item_child.id_name}}" style="width:5%" value="{{=item_child.name}}" onclick="check_dept_Inp(this)" data-id="{{=item_child.id}}" data-name="{{=item_child.name}}" data-type="{{=item_child.type}}"><span style="display: inline-block;margin-left:1rem;width:60%" class="span-text" onclick="check_dept(this)">{{=item_child.name}}</span>
                <span class="aui-iconfont aui-icon-down span-icon" style="position:absolute;right:2rem;"  onclick="dept_goOrStop(this)"></span>
            </div>
        </div>
    </li>
    <div class="aui-content margin-l-5" style="margin-left:1.2rem">
        <ul class="aui-list-in" id="{{=item_child.id}}" >

        </ul>
    </div>
    {{
    }
    }}
</script>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../../script/malfunction/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">

    var childFlag;
    apiready= function(){
        dept_tree()
    }
    function dept_tree(){
        common.post({
            url: config.getAllDeptAndUserUrl,
            isLoading: true,
            data:{
                id:"-1"
            },
            success: function (ret, err) {
                if(ret&&ret.status==="200"){
                    var tempInfo = doT.template($api.text($api.byId('check_dept')));
                    $api.html($api.byId('dept_container'), tempInfo(ret.data));
                    for (var i = 0; i < ret.data.length; i++) {
                        $api.html($api.byId(ret.data[i].id), '');
                    }
                }else{
                    api.toast({
                        msg: '获取部门失败',
                        duration: 2000,
                        location: 'middle'
                    });
                }
            }
        })
    }
    function check_dept_Inp(obj){
        var childEle = $api.first(($api.next(((obj.parentNode).parentNode).parentNode)))
        if(obj.checked){
            $api.html(childEle, '');
        }

    }

    function check_dept(obj){
        var input_ele = obj.previousSibling;
        var childEle = $api.first(($api.next(((obj.parentNode).parentNode).parentNode)))
        var preInpName = $api.attr(input_ele,'name');
        var preInputArr = $api.domAll('input[name="'+preInpName+'"]');
        var notCheckedFlag = true;

        if(input_ele.checked){
            input_ele.checked = false;

        }else{
            input_ele.checked = true;
            $api.html(childEle,'');
        }
        for(var j=0;j<preInputArr.length;j++){
            if(preInputArr[j].checked){
                notCheckedFlag=false;
            }
        }
    }
    function dept_goOrStop(ele){
        var checkBox = $api.first(ele.parentNode);
        if(checkBox.checked){
            api.toast({
                msg:'您已选中该部门，不能再次选中下一级',
                duration:2000,
                location:'middle'
            })
        }else{
            open_checkbox(ele)
        }
    }
    function open_checkbox(ele){
        var childEle = $api.first(($api.next(((ele.parentNode).parentNode).parentNode)));
        var childId = $api.attr(childEle, 'id');
        childFlag = ($api.first(childEle.parentNode)).hasChildNodes()
        var input_ele = $api.attr($api.first(ele.parentNode),'name');
        var preEle = $api.first(ele.parentNode)

        var checkColorChangeArr = $api.domAll('input[name="'+input_ele+'"]');

        if(childFlag){
            $api.removeCls(ele,'aui-icon-top')
            $api.addCls(ele,'aui-icon-down')
            $api.html($api.byId(childId), '');
        }else{
            $api.removeCls(ele,'aui-icon-down')
            $api.addCls(ele,'aui-icon-top')
            common.post({
                url: config.getAllDeptAndUserUrl ,
                isLoading:true,
                data:{
                    id:childId
                },
                success:function (ret, err) {
                    if(ret&&ret.status==="200"&&ret.data&&ret.data.length&&ret.data.length>0){
                        for(var i=0;i<ret.data.length;i++){
                            ret.data[i].id_name = childId
                        }
                        var tempInfo = doT.template($api.text($api.byId('children_dept')));
                        $api.html($api.byId(childId), tempInfo(ret.data));
                        for(var i=0;i<ret.data.length;i++){
                            $api.html($api.byId(ret.data[i].id),'');
                        }
                    }else{
                        api.toast({
                            msg: '没有下一级啦',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }})
        }
    }
    //提交方法，可以获取所被选中的复选框的部门的id
    function submitTest(){
        var inputArr = $("input:checked");
        var data_id = "";
        var data_name = "";
        var data_type = "";
        for (var i=0;i<inputArr.length;i++){
                //data_id.push($api.attr(inputArr[i],'data-id'));
                //data_name.push($api.attr(inputArr[i],'data-name'))
                if(i < inputArr.length-1){
                    data_name += $api.attr(inputArr[i],'data-name') + ","
                    data_id += $api.attr(inputArr[i],'data-id') + ","
                    data_type += $api.attr(inputArr[i],'data-type') + ","
                }else if(i === inputArr.length-1){
                    data_id += $api.attr(inputArr[i],'data-id')
                    data_type += $api.attr(inputArr[i],'data-type')
                    data_name += $api.attr(inputArr[i],'data-name')
                }
                //data_type.push($api.attr(inputArr[i],'data-type'))
        }
        $api.setStorage(storageKey.data_id,data_id);
        $api.setStorage(storageKey.data_name,data_name);
        $api.setStorage(storageKey.data_type,data_type);

        api.sendEvent({
            name: 'loginout',

        });
        api.closeWin()

    }

</script>
</html>
